<template>
    <div class="student">
        <h2>学生姓名:{{ name }}</h2>
        <h2>学生性别:{{ sex }}</h2>
        <h3>{{ number }}</h3>
        <button @click="add">点我number++</button>
        <button @click="sendStudentName1">点我发送学生名至App组件（初始绑定的事件）</button>
        <button @click="sendStudentName2">点我发送学生名至App组件（等1秒版）</button>
        <button @click="unbind">解绑</button>

        <button @click="death">销毁Student组件的实例（vc）</button>
    </div>
</template>

<script>
import Vue from 'vue';
export default Vue.extend({
    name: 'Student',
    data() {
        return {
            name: "张三",
            sex: "男",
            number: 0,
        }
    },
    methods: {
        add() {
            console.log("add回调被调用了");
            this.number++
        },
        sendStudentName1() {
            // 触发Student组件实例身上的 atguigu事件
            this.$emit('atguigu1', this.name)
            this.$emit('event2')
        },
        sendStudentName2() {
            // 触发Student组件实例身上的 atguigu事件
            this.$emit('atguigu2', this.name, 666, 888, "子组件传的第四个参数")
        },
        unbind() {
            // this.$off('atguigu1') // 解绑一个自定义事件
            // this.$off(['atguigu1','event2']) // 解绑多个自定义事件
            this.$off() // 解绑所有事件
        },
        death() {
            this.$destroy() // 销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全部失效
        }
    },
}) 
</script>

<style lang="less" scoped>
.student {
    background-color: orange;
    padding: 5px;
    margin-top: 5px;

    .test {
        color: red;
    }
}
</style>